<template>
	<div style="height: 100%;width: 100%;display: flex;">
		<el-table :data="showData" height="100%" style="margin-left: 2%; width: 96%;">
			<el-table-column prop="droneModelId" label="型号id"></el-table-column>
			<el-table-column prop="droneModelName" label="型号名称"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope" style="display: flex;flex-direction: row; flex-wrap: nowrap;">
					<el-button @click="handleCheckData(scope.row)" type="text" size="small">数据格式</el-button>
					<el-button @click="handleCreate(scope.row)" type="text" size="small">创建实例</el-button>
					<el-button @click="handleCreate(scope.row)" type="text" size="large"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="数据格式" :visible.sync="dataStructureVis" width="40%">
			<span>{{dataStructure}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dataStructureVis = false">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog :title="createModelName" :visible.sync="createDialogVis">
			<el-form :model="droneDeviceInfo">
				<el-form-item label="实例类型" label-width="120px">
					<el-select style="width: 230px;" v-model="droneDeviceInfo.droneDeviceType" placeholder="请选择实例类型">
						<el-option label="多旋翼" value=1></el-option>
						<el-option label="固定翼" value=2></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="实例名称" label-width="120px">
					<el-input style="width: 230px;" v-model="droneDeviceInfo.droneDeviceName"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="实例密码" label-width="120px">
					<el-input style="width: 230px;" v-model="droneDeviceInfo.droneDevicePass"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="实例sn码" label-width="120px">
					<el-input style="width: 230px;" v-model="droneDeviceInfo.droneDeviceSn"
						autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createDialogVis = false">取 消</el-button>
				<el-button type="primary" @click="refirmCreate()">确 定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import webSetInfo from "@/server/webSetInfo";
	import {CommonRequest} from "@/server/request";
	export default {

		data() {
			return {
				showData: [],
				userInfo: {},
				droneDeviceInfo: {
					droneModelId: '',
					droneDeviceType: '',
					droneDevicePass: '',
					droneDeviceSn: '',
					droneDeviceName: '',
				},
				createDialogVis: false,
				createModelName: '',

				dataStructureVis:false,
				dataStructure:null,
			}
		},
		mounted() {
			console.log("11111userAll", this.userInfo);
			this.userInfo = this.$store.state.userAllInfos;
			console.log("userAll", this.userInfo);
			if (this.userInfo == null) {
				this.$router.push({
					path: '/login'
				})
			} else {
				this.getNewInfo()
			}
		},
		methods: {
			handleCreate(e) {
				this.createModelName = "创建" + e.droneModelName + "的实例"
				this.droneDeviceInfo.droneModelId = e.droneModelId
				this.createDialogVis = true;
			},
			refirmCreate() {
				if (this.droneDeviceInfo.droneDeviceName == '' || this.droneDeviceInfo.droneDevicePass == '' || this
					.droneDeviceInfo.droneDeviceSn ==
					'' || this.droneDeviceInfo.droneDeviceType == '' || this.droneDeviceInfo.droneModelId == '') {
					this.$message.error("请完善信息")
					return;
				}
				let sha256 = require("js-sha256").sha256
				var password_sha256 = sha256(this.droneDeviceInfo.droneDevicePass)
				CommonRequest({
						url: `${webSetInfo.apiUrl}` + `/create`,
						method: "post",
						data: {
							requestCode: '008',
							userId: this.userInfo.userId,
							token: this.userInfo.token,
							droneDevicePass: password_sha256,
							droneDeviceSn: this.droneDeviceInfo.droneDeviceSn,
							droneDeviceName: this.droneDeviceInfo.droneDeviceName,
							droneModelId: this.droneDeviceInfo.droneModelId,
							droneDeviceType: this.droneDeviceInfo.droneDeviceType
						},
						transformRequest: [function(data) {
							// Do whatever you want to transform the data
							let ret = ''
							for (let it in data) {
								// 如果要发送中文 编码
								ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
							}
							return ret
						}],
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then(function(response) {
						var result = response.data.result
						if (result == 1) {
							this.$message({
								message: '创建成功',
								type: 'success'
							});
							this.createDialogVis = false;
						} else if (result == 0) {
							this.tokenExpire()
						} else if (result == 4) {
							this.$message.error("sn码已被注册")
						} else {
							this.$message.error("未知错误")
						}
					})
			},
			handleCheckData(e) {
				this.dataStructureVis = true;
				this.dataStructure = e.dronemodelinstr
			},
			getNewInfo() {
				CommonRequest ({
						url: `${webSetInfo.apiUrl}` + `/getNewInfo`,
						method: "post",
						data: {
							userId: this.userInfo.userId,
							token: this.userInfo.token,
						},
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						}
					})
					.then(response => {
						var data = response.data
						var result = data.result
						if (result == 1) {
							if (data.data.length == 0) {
								this.$message.error("暂无更多数据")
							} else {
								this.loadData(data.data)
							}
						} else if (result == 0) {
							this.tokenExpire()
						}
					})
			},
			//token过期
			tokenExpire: function() {
				this.$router.push({
					path: '/login',
				})
			},
			//装载data
			loadData(e) {
				this.showData = e
			}
		}
	}
</script>

<style>
</style>
